<template>
  <div class="field-select">
    <div class="left-part">
      <div class="total-box">
        <span>可选字段：</span>
        <div>
          <span :class="selectTotal > 0 ? 'activeNum' : '' "> {{ selectTotal }}</span>
          <span>/{{ fieldList.length }}</span>
        </div>
      </div>
      <div class="content">
        <el-checkbox
          border
          v-for="(item, index) in fieldList"
          :key="index"
          v-model="item.checked"
          @change="handleSelect(item)"
          @dblclick.native="handleDoubleClick(item)"
        >{{ item.label}}</el-checkbox>
      </div>
    </div>
    <div class="btn-part">
      <el-button 
        size="small" 
        class="el-icon-arrow-left" 
        :style="activeLeft ? 'background-color: #2F6CED' : 'background-color: #ACC4F8'"
        @click="handleLeftClick"
      ></el-button>
      <el-button 
        size="small" 
        class="el-icon-arrow-right" 
        :style="activeRight ? 'background-color: #2F6CED' : 'background-color: #ACC4F8'"
        @click="handleRightClick"
      ></el-button>
    </div>
    <div class="right-part">
      <div class="total-box">
        <span>已选字段：</span>
        <div>
          <span :class="selectedTotal > 0 ? 'activeNum' : ''"> {{ selectedTotal }}</span>
          <span>/{{ selectedFieldList.length }}</span>
        </div>
      </div>
      <div class="content">
        <el-checkbox
          border
          v-for="(item, index) in selectedFieldList"
          :key="index"
          v-model="item.checked"
          @change="handleSelected(item)"
          @dblclick.native="handleDoubleClick(item)"
        >{{ item.label}}</el-checkbox>
      </div>
      <div class="right-part-btn">
        <el-button size="small" @click="operateAction('3')">置顶</el-button>
        <el-button size="small" @click="operateAction('1')">上移</el-button>
        <el-button size="small" @click="operateAction('2')">下移</el-button>
        <el-button size="small" @click="operateAction('4')">置底</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fieldList: [
        {
          label: '姓名',
          value: 'name',
          selected: false,
          checked: false,
        },
        {
          label: '年龄',
          value: 'age',
          selected: false,
          checked: false,
        },
        {
          label: '性别',
          value: 'gender',
          selected: false,
          checked: false,
        },
      ],
      selectedFieldList: [
        {
          label: '手机号',
          value: 'phone',
          selected: true,
          checked: false,
        },
        {
          label: '创建时间',
          value: 'createTime',
          selected: true,
          checked: false,
        },
        {
          label: '更新时间',
          value: 'updateTime',
          selected: true,
          checked: false,
        },
      ],
      selectTotal: 0,
      selectedTotal: 0,
      selectedList: [],
      operationItem: "", // 操作的字段
      operationType: "", // 操作类型 1 上移 2 下移 3 置顶 4 置底
      lastClickTime: 0, // 上次点击的时间戳
      doubleClickThreshold: 300, // 双击的阈值（毫秒）
    }
  },
  computed: {
    activeRight() {
      return this.fieldList.some((item) => item.checked)
    },
    activeLeft() {
      return this.selectedFieldList.some((item) => item.checked)
    },
  },
  methods: {
    resetForm() {
      this.fieldList.forEach((item) => {
        item.checked = false
      })
      this.selectedFieldList.forEach((item) => {
        item.checked = false
      })
      this.selectTotal = 0;
      this.selectedTotal = 0;
      this.selectedList = [];
      this.operationItem = "";
      this.operationType = "";
    },
    // 点击可选字段
    handleSelect(item) {
      console.log(item)
      if(item.checked) {
        this.selectTotal++;
        this.fieldList.forEach((i) => {
          if(i.value === item.value) {
            i.checked = true
          }
        })
      } else {
        this.selectTotal--;
        this.fieldList.forEach((i) => {
          if(i.value === item.value) {
            i.checked = false
          }
        })
      }
    },
    // 点击已选字段
    handleSelected(item) {
      if(item.checked) {
        this.selectedTotal++;
        this.selectedList.push(item);
        this.selectedFieldList.forEach((i) => {
          if(i.value === item.value) {
            i.checked = true
          }
        })
      } else {
        this.selectedTotal--;
        this.selectedList = this.selectedList.filter((i) => i.value !== item.value);
        this.selectedFieldList.forEach((i) => {
          if(i.value === item.value) {
            i.checked = false
          }
        })
      }
    },
    handleDoubleClick(item) {
      if(item.selected === false) {
        this.selectedFieldList.push({
          label: item.label,
          value: item.value,
          selected: true,
        });
        this.fieldList = this.fieldList.filter((i) => i.value !== item.value);
      } else {
        this.fieldList.push({
          label: item.label,
          value: item.value,
          selected: false,
        });
        this.selectedFieldList = this.selectedFieldList.filter((i) => i.value !== item.value);
      }
      this.selectTotal = this.fieldList.filter((i) => i.checked).length;
      this.selectedTotal = this.selectedFieldList.filter((i) => i.checked).length;

    },
    handleRightClick() {
      this.fieldList.forEach((item) => {
        if(item.checked) {
          this.selectedFieldList.push({
            label: item.label,
            value: item.value,
            selected: true,
            checked: false,
          });
          this.fieldList = this.fieldList.filter((i) => i.value !== item.value);
        }
      })
      
      this.selectTotal = this.fieldList.filter((i) => i.checked).length;
      this.selectedTotal = this.selectedFieldList.filter((i) => i.checked).length;
    },
    handleLeftClick() {
      this.selectedFieldList.forEach((item) => {
        if(item.checked) {
          this.fieldList.push({
            label: item.label,
            value: item.value,
            selected: false,
            checked: false,
          });
          this.selectedFieldList = this.selectedFieldList.filter((i) => i.value !== item.value);
        }
      })
      this.selectTotal = this.fieldList.filter((i) => i.checked).length;
      this.selectedTotal = this.selectedFieldList.filter((i) => i.checked).length;
    },
    operateAction(type) {
      if(this.selectedList.length === 0) {
        this.$message.warning('请选择要操作的字段')
        return
      }
      if(this.selectedList.length > 1) {
        this.$message.warning('请选择一个字段进行操作')
        return
      }

      // 1 上移 2 下移 3 置顶 4 置底
      this.operationType = type;
      this.operationItem = this.selectedList[0];
      const index = this.selectedFieldList.indexOf(this.operationItem);
      if (index === -1) return; // 未找到选中项时退出
      
      if(type === '1') {
        // 上移：与前一项交换位置
        if (index > 0) {
          // 使用splice方法确保Vue能检测到数组变化
          const temp = this.selectedFieldList[index - 1];
          this.selectedFieldList.splice(index - 1, 1, this.operationItem);
          this.selectedFieldList.splice(index, 1, temp);
        }
      } else if(type === '2') {
        // 下移：与后一项交换位置
        if (index < this.selectedFieldList.length - 1) {
          // 使用splice方法确保Vue能检测到数组变化
          const temp = this.selectedFieldList[index + 1];
          this.selectedFieldList.splice(index + 1, 1, this.operationItem);
          this.selectedFieldList.splice(index, 1, temp);
        }
      } else if(type === '3') {
        // 置顶：移到数组开头
        if (index > 0) {
          this.selectedFieldList.splice(index, 1);
          this.selectedFieldList.unshift(this.operationItem);
        }
      } else if(type === '4') {
        // 置底：移到数组末尾
        if (index < this.selectedFieldList.length - 1) {
          this.selectedFieldList.splice(index, 1);
          this.selectedFieldList.push(this.operationItem);
        }
      }
      this.selectedList = [];
      this.operationItem = "";
      this.operationType = "";
    },
  },
}
</script>

<style lang="scss" scoped>
  .field-select {
    display: flex;
    justify-content: space-between;
  }
  .left-part {
    width: 365px;
    height: 400px;
    .content {
      height: 370px;
      overflow: auto;
      border: 1px solid #e4e7ed;
      border-radius: 0 0 4xp 4px;
    }
    .el-tag {
      margin: 5px;
      cursor: pointer;
    }
  }
  .right-part {
    width: 365px;
    height: 400px;
    .content {
      height: 330px;
      overflow: auto;
      border: 1px solid #e4e7ed;
      border-radius: 0 0 4xp 4px;
      box-sizing: border-box;
    }
    .el-tag {
      margin: 5px;
      cursor: pointer;
    }
    .right-part-btn {
      height: 40px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      border: 1px solid #e4e7ed;
      border-top: none;
      box-sizing: border-box;
      .el-button {
        padding: 5px 10px;
        margin: 0 10px 0 0;
      }
    }
  }
  .btn-part {
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .el-button {
      margin: 0;
    }
    .active {
      background: #2F6CED;
    }
    .unactive {
      background: #ACC4F8;
    }
  }
  .total-box {
    height: 30px;
    padding: 8px 10px;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F5F7FA;
    border: 1px solid #EBEEF5 ;
  }
  .el-checkbox {
    width: 100px;
    padding: 2px 10px;
    border-radius: 3px;
    margin: 10px;
  }

  .el-icon-arrow-left, .el-icon-arrow-right {
    color: #FFF;
  }
  .activeNum {
    color: #2F6CED;
  }

</style>